<template>
  <div class="edit-container">
    <div class="back" @click="back">
      <i class="el-icon-arrow-left c-font-b"></i>
      <span>食堂操作</span>
    </div>
    <!--    表单区域-->
    <div class="form" style="width: 500px">
      <el-form
        ref="formRef"
        :rules="formRule"
        :model="canteenForm"
        label-width="120px"
        label-position="right"
      >
        <el-form-item label="名称" prop="name">
          <el-input
            size="small"
            v-model="canteenForm.name"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="食堂地址" prop="address">
          <el-input
            size="small"
            v-model="canteenForm.address"
            placeholder="请输入食堂地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            action="/api/storages"
            accept=".jpeg,.png,.jpg,.bmp,.gif"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :before-upload="checkFileType"
            :file-list="fileList"
            :headers="header"
            :on-exceed="handleOnExceed"
            :limit="1"
            name="multipartFile"
          >
            <el-icon><plus /></el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible">
            <img :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="营业时间" prop="time">
          <el-time-picker
            size="small"
            value-format="HH:ss"
            style="width: 160px; margin-right: 10px"
            v-model="canteenForm.openStartTime"
            placeholder="开始时间"
          >
          </el-time-picker>
          <el-time-picker
            size="small"
            style="width: 160px"
            value-format="HH:ss"
            v-model="canteenForm.openEndTime"
            :picker-options="{
              selectableRange: '18:30:00 - 20:30:00',
            }"
            placeholder="结束时间"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item
          label="排序"
          prop="sort"
          :rules="[
            { type: 'number', message: '请输入数字' },
            { required: true, message: '请输入排序数' },
          ]"
        >
          <el-input
            size="small"
            v-model.number="canteenForm.sort"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="memo">
          <el-input v-model="canteenForm.memo" type="textarea"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="submit"
            >确定</el-button
          >
          <el-button size="small" @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import edit from "@/composables/canteen/canteen-edit";
import { Plus } from "@element-plus/icons";
import { reactive, ref } from "vue";
import Cookies from "js-cookie";
import { ElMessage } from "element-plus";
export default {
  name: "CanteenEdit",
  components: {
    Plus,
  },
  setup() {
    const {
      canteenForm,
      back,
      cancel,
      formRef,
      submit,
      getImgUrl,
      fileList,
      formRule,
      handleOnExceed,
    } = edit();
    const dialogVisible = ref(false);
    const dialogImageUrl = ref("");
    const header = reactive({ Authorization: Cookies.get("token") });
    //获取图片地址
    function getImg(val) {
      canteenForm.image = val;
      fileList.value.push({ url: val });
    }
    function handlePictureCardPreview(file) {
      dialogVisible.value = true;
      dialogImageUrl.value = file.url;
    }
    function handleRemove(file, fileList) {
      fileList.value = fileList;
    }
    function handleSuccess(file) {
      canteenForm.image = file.data.url;
    }
    function checkFileType(file) {
      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf("."));
      // jpeg,.png,.jpg,.bmp,.gif
      if (
        fileType === ".jpg" ||
        fileType === ".png" ||
        fileType === ".jpeg" ||
        fileType === ".bmp" ||
        fileType === ".gif"
      ) {
        // 不处理
      } else {
        ElMessage.error("请上传正确的图片类型,jpeg,.png,.jpg,.bmp,.gif文件,");
        return false;
      }
    }
    return {
      formRule,
      handleOnExceed,
      canteenForm,
      cancel,
      submit,
      back,
      formRef,
      getImgUrl,
      getImg,
      fileList,
      handlePictureCardPreview,
      handleRemove,
      handleSuccess,
      dialogVisible,
      header,
      dialogImageUrl,
      checkFileType,
    };
  },
};
</script>

<style scoped lang="scss">
.edit-container {
  height: calc(100vh - 200px);
  overflow-y: auto;
  margin: 20px 0;
  border-radius: 6px;
  box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);
  background: #ffffff;
  padding: 10px 20px;

  .back {
    padding-bottom: 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid #edeff3;
  }
}
</style>
